<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<svg id="p1" width="500" height="500">
		</svg>
	</body>
	<script>
		let data = [60,90,120];
		let sum = data.reduce((a,b)=>a+b)
		let aarr = data.map(v=>{
			return v/sum*360;
		})
		console.log(aarr)
		let now = 0;
		aarr.forEach(v=>{
			fan("p1",250,250,200,now,v+now);
			now = v+now;
		})
		
		function fan(id,cx,cy,r,sa,ea){
			let p1 = document.getElementById(id);
			let path = document.createElementNS("http://www.w3.org/2000/svg","path")
			//path
			//cx cy起始x坐标
			//半径
			//起始角度
			//结束角度
			let x1 = cx+Math.sin(sa*Math.PI/180)*r;
			let y1 = cy-Math.cos(sa*Math.PI/180)*r;
			
			let x2 = cx + Math.sin(ea*Math.PI/180)*r;
			let y2 = cy-Math.cos(ea*Math.PI/180)*r;
			let html ="";
			//step Line
			html+=`M 250 250 L ${x1} ${y1} `;
			//step Line
			html+=`A ${r} ${r} 0 ${ea-sa>180?1:0} 1 ${x2} ${y2} `
			//step Z
			html+="Z"
			path.setAttribute("d",html);
			path.setAttribute("style",`stroke:#ccc; fill:rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`)
			p1.appendChild(path);
		}
		
	</script>
</html>
